<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .redBroder{
            border: 2px solid crimson;
        }
        .blackBroder{
            border: 4px solid yellow;
        }
    </style>
</head>
<body>
    <div id="div1">
        <span>用户名</span>
        <input type="text" id="username" placeholder="请输入用户名" onblur="clean(this)">
    </div>
    <div>
        <input type="password" id="password" placeholder="请输入密码">
    </div>
     <div>
        <input type="button" value="登录" onclick="login()">
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function login() {
            var username=document.getElementsByName("username");
            var username1=$("#username");
            username1.addClass("redBroder")

           // username.style.border="2px solid red"
        }
        function clean(ths) {
            console.log(ths);
            $("#"+ths.id).addClass("blackBroder")
            //ths.style.borderColor="black"

        }
    </script>


</body>
</html>